<!---选择人员(多选)-->
<template>
  <div @click="showSelectBillDialog()">
    <el-tag
      v-for="tag in temp"
      :key="tag.Id"
      style="margin-left:3px;"
      @close="handleDel(tag)"
    >
      {{ tag.Name }}
    </el-tag>
    <el-tag v-if="temp.length<1 && !disabled">请选择</el-tag>
    <selectperson ref="refMultPerson" :echo-list="checkedUsers" @allSelect="allSelect" />
  </div>
</template>
<script>
import selectperson from '@/views/components/permissions/selectperson'
export default {
  name: 'Selectmultperson',
  components: {
    selectperson
  },
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false,
      checkedUsers: [], // 打开弹窗选择的用户
      temp: this.data || []
    }
  },
  watch: {
    data: {
      deep: true,
      handler(val) {
        this.temp = this.data
        this.$parent.$emit('el.form.blur')
      }
    }
  },
  methods: {
    showSelectBillDialog() {
      if (this.disabled) return false
      this.dialogVisible = true
      this.checkedUsers = this.temp
      this.$refs.refMultPerson.showSelectPersonDialog()
    },
    // 选择人员时回调方法
    allSelect(taglist) {
      this.temp = taglist
      this.$emit('update:data', this.temp)
    }
  }
}
</script>
